<template>
  <div class="container" v-if="detail">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="main">
          <div class="post_breadcrumb">
            <span class="span" @click="clickPush">旅游攻略</span>/
            <span>攻略详情</span>
          </div>

          <h1>{{detail.title}}</h1>

          <div class="post-info">
            <span>攻略：{{date}}</span>
            <span>阅读：{{detail.watch}}</span>
          </div>

          <div class="post_content" v-html="detail.content"></div>

          <div class="post-ctrl">
            <div class="post-item">
              <i class="iconfont iconpinglun">
                <p>评论({{detail.comments.length}})</p>
              </i>
            </div>
            <div class="post-item">
              <i class="iconfont iconfenxiang">
                <p>分享</p>
              </i>
            </div>
          </div>

          <DetailComment
            :currentReply="currentReply"
            @clearReply="currentReply=null"
            @reloadComments="reloadComments"
          />
          <div class="post_list" v-if="pageList.length">
            <PostItem
              v-for="(item,index) in pageList"
              :key="index"
              :commentData="item"
              @callReply="callReply"
            />
          </div>
        </div>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.commentList.length"
          ></el-pagination>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="aside">
          <h4 class="aside_title">相关攻略</h4>

          <Morestrategies @ArticleId="ArticleId" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      detail: null,
      // 时间
      date: "",

      commentList: [],
      currentReply: null,

      currentPage: 1,
      pageSize: 5,
      pageSizes: [5, 10, 15, 20],
      total: 0,
      pageList: []
    };
  },
  mounted() {
    this.init();
    this.detailcomment();
    // console.log(res.data.data);
  },
  methods: {
    clickPush() {
      this.$router.push("/post");
    },
    async init() {
      // 发送请求获取数据
      const res = await this.$axios.get("/posts", {
        params: this.$route.query
      });
      // 获取到的数据赋值到data
      this.detail = res.data.data[0];

      // 通过moment将数据了的时间戳转换成YYYY-MM-DD的格式
      this.date = moment(this.detail.created_at).format("YYYY-MM-DD HH:mm");
    },
    ArticleId(id) {
      this.$router.push("/post/detail?id=" + id);
      this.detailcomment();
    },
    async detailcomment() {
      const res = await this.$axios.get("/posts/comments", {
        params: { post: this.$route.query.id }
      });
      this.commentList = res.data.data;
      // console.log(res.data.data);
      this.countList();
    },
    callReply(replyObj) {
      // console.log(parentid);
      this.currentReply = replyObj;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.countList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.countList();
    },
    countList() {
      this.pageList = this.commentList.filter((v, index) => {
        // 计算开始的条数
        const start = (this.currentPage - 1) * this.pageSize;
        // 计算结束的条数
        const end = this.currentPage * this.pageSize;
        if (index >= start && index < end) {
          return true;
        } else {
          return false;
        }
      });
    },
    reloadComments() {
      this.detailcomment();
    }
  },
  watch: {
    "$route.fullPath"() {
      this.init();
    },
    $route() {
      this.$router.go();
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
  .post_breadcrumb {
    .span {
      font-weight: 700;
      cursor: pointer;
    }
  }
  .main {
    margin-bottom: 30px;
    h1 {
      padding: 20px 0;
      border-bottom: 1px solid #ddd;
    }
    .post-info {
      color: #999;
      text-align: right;
      padding: 20px;
      span {
        margin: 0 0 0 20px;
      }
    }
    .post_content {
      /deep/img {
        max-width: 100%;
        max-height: 100%;
        margin: 10px 0;
      }
    }
    .post-ctrl {
      display: flex;
      justify-content: center;
      padding: 50px 0 30px;
      .post-item {
        margin: 0 20px;
        font-size: 20px;
        text-align: center;
        cursor: pointer;

        i {
          display: block;
          font-size: 28px;
          color: orange;
          p {
            margin-top: 5px;
            font-size: 14px;
            color: #999;
          }
        }
      }
    }
    .post_list {
      border: 1px solid #ddd;
    }
  }
  .aside {
    flex: 1;
    .aside_title {
      font-weight: 400;
      font-size: 18px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }
  }
}
</style>